<template>
  <!-- 人工认证，信息确认 -->
  <div class="formDiv">
    <el-form ref="form" :model="form" label-width="191px" :rules="rules">
      <el-form-item label="单位名称（中英文对照）：" prop="companyName">
        <el-input v-model.trim="form.companyName" placeholder="请输入中文名称（英文名称）" maxLength="50"></el-input>
      </el-form-item>

      <el-form-item label="经办人姓名：" prop="handlerName">
        <el-input v-model.trim="form.handlerName" placeholder="请输入经办人姓名" maxLength="20"></el-input>
      </el-form-item>

      <el-form-item label="经办人证件类型：" prop="handlerCertificatesType">
        <el-select v-model.trim="form.handlerCertificatesType" style="width: 100%" placeholder="请选择经办人证件类型">
          <el-option 
            v-for="item in legalRepresentativeTypes" 
            :value="item.dictValue"
            :key="item.dictValue" 
            :label="item.dictLabel"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="经办人证件号码：" prop="handlerCertificatesNumber">
        <el-input v-model.trim="form.handlerCertificatesNumber" placeholder="请输入经办人证件号码" maxLength="30" @input="form.handlerCertificatesNumber = form.handlerCertificatesNumber.replace(/[^\w]/g,'')"></el-input>
      </el-form-item>

      <el-form-item label="经办人性别：" prop="handlerSex">
        <el-radio-group v-model.trim="form.handlerSex">
          <el-radio v-for="item in sexList" :label="item.dictValue"
            :key="item.dictValue">{{item.dictLabel}}</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="经办人联系电话：" prop="handlerPhone">
        <el-input v-model.trim="form.handlerPhone" placeholder="请输入经办人联系电话" maxLength="11" @input="form.handlerPhone = form.handlerPhone.replace(/[^0-9]/g,'')"></el-input>
      </el-form-item>

      <el-form-item label="经办人电子邮箱：" prop="handlerMailbox">
        <el-input v-model.trim="form.handlerMailbox" placeholder="请输入经办人电子邮箱" maxLength="50"></el-input>
      </el-form-item>

      <el-form-item label="上传单位开业证书信息页：" prop="companyCertificateFile">
        <div class="up-box">
          <finalUpload
            @changeImgUp="upCCF"
            :limit="1"
            name="上传"
            tip=""
          ></finalUpload>
          <div>
            <p>注意事项：</p>  
            上传单位开业证书或单位营业执照信息页的扫描件或照片。 照片所有信息需清晰可见，内容真实有效，不得做 任何修改。照片支持.jpg、.jpeg 格式，大小不超过1M。
          </div>
        </div>
      </el-form-item>

      <el-form-item label="上传经办人证件信息页：" prop="handlerCertificateFile">
        <div class="up-box">
          <finalUpload
            @changeImgUp="upHCF"
            :limit="1"
            name="上传"
            tip=""
            :size="0.5"
          ></finalUpload>
          <div>
            <p>注意事项：</p>
            上传证件个人信息页(面)扫描件或照片。 照片所有信息需清晰可见，内容真实有效，不得做 任何修改。照片支持.jpg、.jpeg 格式，大小不超过500K。
          </div>
        </div>  
      </el-form-item>

      <el-form-item>
        <el-checkbox v-model.trim="form.isRead">
        </el-checkbox>
        <span style="margin-left: 10px">我已阅读并同意</span>
        <span style="color: #045db9" class="agreementDiv">《裕华区政府企业服务用户注册协议》</span>
      </el-form-item>

      <el-form-item>
        <div class="btnDiv">
          <Buttons @submit="submit" :buttons="buttons"></Buttons>
        </div>
      </el-form-item>
      <!-- <el-form-item>
        <div class="btnDiv">
          <div class="btn" @click="submit()">下一步</div>
        </div>
      </el-form-item> -->
    </el-form>
  </div>
</template>

<script>
	import config from '@/utils/config.js'
	import {request} from '@/utils/request.js'
  import {isPhone} from "@/utils/util"

  import finalUpload from '@/components/finalUpload'
  import { getFormOptions } from "@/common/api/logOrReg.js";
  export default {
    components: {
      finalUpload,
    },
    props: {
      value: {
        type: Number,
        default: 1
      }
    },
    data() {
      var handlerMailbox = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入经办人电子邮箱'))
        } else if (
          !/^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/.test(value)
        ) {
          callback(new Error('请输入正确的经办人电子邮箱'))
        } else {
          callback()
        }
      }
      return {
        buttons:[{text:"下一步",type:"normal",size:"l",method:"submit"}],
        legalRepresentativeTypes: [],
        form: {
          companyName: null,
          handlerName: null,
          handlerCertificatesType: null,
          handlerCertificatesNumber: null,
          handlerSex: "0",
          handlerPhone: null,
          handlerMailbox: null,
          companyCertificateFile: null,
          handlerCertificateFile: null,
          isRead: false
        },
        rules: {
          companyName: [
            {required:true, trigger:'blur', message:'请输入中文名称（英文名称）'}
          ],
          handlerName: [
            {required:true, trigger:'blur', message:'请输入经办人姓名'}
          ],
          handlerCertificatesType: [
            {required:true, trigger:'blur', message:'请选择经办人证件类型'}
          ],
          handlerCertificatesNumber: [
            {required:true, trigger:'blur', message:'请输入经办人证件号码'}
          ],
          handlerSex: [
            {required:true, trigger:'blur', message:'请选择经办人性别'}
          ],
          handlerPhone: [
            {required:true, trigger:'blur', message:'请输入经办人联系电话'},
            {trigger:'blur', validator: (rule,value,callback)=>{
                if(!isPhone(value)){
                  callback(new Error('手机号码格式不正确'))
                }else{
                  callback()
                }
              }
            }
          ],
          handlerMailbox: [
            { required: true, validator: handlerMailbox, trigger: 'blur' },
          ],
          companyCertificateFile: [
            {required:true, trigger:'blur', message:'请上传单位开业证书信息页'}
          ],
          handlerCertificateFile: [
            {required:true, trigger:'blur', message:'请上传经办人证件信息页'}
          ]                                  
        },
        sexList: [
          {dictLabel: '男', dictValue: '0'},
          {dictLabel: '女', dictValue: '1'}
        ],
        types: [
          {dictLabel: '类型一', dictValue: '0'},
          {dictLabel: '类型二', dictValue: '1'}
        ]
      }
    },
    mounted() {
      this.getFormOptions()
    },
    methods: {
			async getFormOptions() {
        let res = await getFormOptions({})
				this.legalRepresentativeTypes = res.data.legal_representative_type
			},
      submit(){
				this.$refs['form'].validate((valid) => {
					if(valid) {
            if(this.form.isRead) {
              // 缓存当前表单信息
              localStorage.setItem('preForm', JSON.stringify(this.form))
              this.next()
            } else {
              this.$message.error('请阅读《裕华区政府企业服务用户注册协议》')
            }
					}
				})
      },
      prev() {
        this.$emit('input', this.value-1)
      },
      next() {
        this.$emit('input', this.value+1)
      },
      upCCF(e) {
        this.form.companyCertificateFile = e.map(el => el.batchId).join(',')
      },
      upHCF(e) {
        this.form.handlerCertificateFile = e.map(el => el.batchId).join(',')
      }
    }
  }
</script>

<style lang="scss" scoped>
.formDiv {
  margin: 0 auto 100px auto;
  width: 750px;
  text-align: left;
  .agreementDiv:hover {
    cursor: pointer;
    text-decoration: underline;
  }
  .btnDiv {
    display: flex;
    .btn {
      background-color: #f1f2f4;
      color: #045db9;
      margin-right: 20px;
      width: 100px;
      text-align: center;
      font-size: 15px;
      border-radius: 5px;
      &:hover {
        cursor: pointer;
        box-shadow: 0px 0px 5px #888888;
        transition: all 0.2s ease 0s;
      }
    }
  }
  #codeDiv {
    display: flex;
    .sendCodeBtn {
      white-space: nowrap;
      background-color: #f1f2f4;
      color: #045db9;
      width: 120px;
      text-align: center;
      border-top-right-radius: 4px;
      border-bottom-right-radius: 4px;
      &:hover {
        cursor: pointer;
        box-shadow: 0px 0px 3px #888888;
        transition: all 0.2s ease 0s;
      }
    }
    .cantSendBtn {
      white-space: nowrap;
      background-color: #f1f2f4;
      color: #045db9;
      width: 120px;
      text-align: center;
      border-top-right-radius: 4px;
      border-bottom-right-radius: 4px;
      &:hover {
        cursor: pointer;
      }
    }
  }
}
::v-deep .formDiv #codeDiv .el-input .el-input__inner {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.up-box {
  display: flex;
  div {
    color: #bbb;
    line-height: 26px;
  }
}
</style>